import React, { Component } from 'react'
import Header from '../common/Header'
import TabBar from '../common/TabBar'
import Axios from 'axios';
import { connect } from 'react-redux';
import { collect_action, cancel_collect_action, } from '../../store/store';

class Allgood extends Component {
    constructor() {
        super();
        this.state = {
            list: [],
            currentIndex:0,//保存当前点击导航的索引
        }
    }
    
    componentDidMount() {
        Axios.get('/allgood').then((res) => {
            this.setState({
                list: res.data.list
            });
            console.log(res.data.list);
            
        })
    }
    render() {
        return (
            <div className="allgood-page">
                {/* header */}
                <Header title="所有商品" ></Header>

                <div className="main">
                    {/* 导航 */}
                    <div className="nav">
                        {
                            this.state.list.map((item,index) => {
                                return (
                                    <div onClick={() => { this.setState({ currentIndex: index }) }} className={`nav-item ${this.state.currentIndex === index?'active':''}`} key={item.title}>{item.title}</div>
                                )
                            })
                        }
                    </div>
                    {/* 列表 */}
                    <div className="list">
                        {
                            this.state.list.length > 0 &&
                            this.state.list[this.state.currentIndex].content.map((item, index) => {
                                return (
                                    <div className="item" key={item.id}>
                                        <div className="pic">
                                            <img src={item.pic} alt=""/>
                                        </div>
                                        <div className="text">
                                            <div>{item.name}</div>
                                            <div>¥{item.price}</div>
                                            <div>{item.phone}</div>
                                        </div>
                                        {/* 判断显示哪个按钮的逻辑: 拿当前对象和收藏列表中的对象对比,看当前对象在不在收藏列表中? */}
                                        {
                                            this.props.collectList.find((i)=>{ return item.id === i.id })
                                             ? 
                                                <div className="btn cancel" onClick={() => { this.props.cancel_collect(item.id) }}>取消收藏</div> :
                                                <div className="btn" onClick={()=>{ this.props.collect(item) }}>收藏</div>
                                                
                                        }
                                        
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                

                <TabBar></TabBar>

            </div>
        )
    }
}


export default connect(
    (state) => {//注入数据
        return {
            collectList: state.collectList
        }
    },
    (dispatch) => {//注入方法
        return {
            collect: (item) => {
                dispatch(collect_action(item));
            },
            cancel_collect: (id) => {
                dispatch(cancel_collect_action(id));
            }
        }
    }
)( Allgood );
